<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1>Upload Profile Picture</h1>
  <form id="uploadForm" enctype="multipart/form-data">
    <input type="file" name="profilePicture" id="profilePictureInput" accept="image/png, image/jpeg">
    <button type="button" onclick="uploadProfilePicture()">Upload</button>
  </form>

  <script>
    function uploadProfilePicture() {
      var fileInput = document.getElementById('profilePictureInput');
      var file = fileInput.files[0];

      var formData = new FormData();
      formData.append('profilePicture', file);

      var xhr = new XMLHttpRequest();
      xhr.open('POST', '/user/modifyProfilePicture', true);

      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          alert('Profile picture uploaded successfully!');
        }
      };

      xhr.send(formData);
    }
  </script>
</body>

</html>